* {
    margin : 0;
    padding: 0;
}

body {
    width     : 100vw;
    height    : 100vh;
    overflow  : hidden;
    background: black;
}


// 外部容器
.container {
    width  : 100%;
    height : 100%;
    display: flex;

    // 单独DOM容器
    .poster {
        flex           : 1;
        position       : relative;
        filter         : brightness(0.5) blur(2px);
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        font-family    : serif;
        font-size      : 20px;
        transition     : background 0.3s,
            filter 0.3s,
            flex 0.3s cubic-bezier(0.5, -0.5, 0.2, 0.7);

        .del {
            width        : 30px;
            height       : 30px;
            font-size    : 30px;
            background   : rgba(255, 255, 255, 0.364);
            color        : white;
            position     : absolute;
            left         : 10px;
            bottom       : 10px;
            text-align   : center;
            line-height  : 30px;
            border-radius: 50%;
            cursor       : pointer;
            transform    : translateY(200%);
            transition   : 0.3s;
        }

        span {
            flex           : 1;
            display        : flex;
            justify-content: center;
            align-items    : center;
        }

        .all {
            width     : 100%;
            font-size : 50px;
            color     : white;
            transition: all 0.5s;
        }

        .above {
            transform: translateY(-100%);
        }

        .below {
            transform: translateY(100%);
        }

        .theme {
            width     : 100%;
            color     : white;
            font-size : 40px;
            transition: all 0.3s cubic-bezier(0.61, -0.9, 0.7, 0.5), ;
        }

        .font-cubic {
            font-weight: bolder;
            font-size  : 60px;
        }

        .font-transform {
            transform: translate(0, 0);
        }
    }

    .poster-open {
        flex  : 6;
        filter: brightness(1) blur(0px);
    }
}

// 下拉菜单
.drop {
    width          : 500px;
    height         : 250px;
    position       : fixed;
    top            : 0;
    left           : 50%;
    transform      : translate(-50%, -110%);
    z-index        : 999;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    align-items    : center;
    border-radius  : 0 0 10px 10px;
    overflow       : hidden;
    box-shadow     : 3px 5px 3px rgba(0, 0, 0, 0.427);
    transition     : 0.5s;

    .mask {
        width     : 100%;
        height    : 100%;
        background: rgba(255, 255, 255, 0.485);
        position  : absolute;
        z-index   : -1;
        filter    : blur(5px)
    }

    .drop-box {
        width             : 100%;
        height            : 160px;
        display           : flex;
        // flex-direction : column;
        flex-wrap         : wrap;
        justify-content   : center;
        align-items       : center;

        .content {
            width          : 80%;
            height         : 20px;
            display        : flex;
            justify-content: space-between;
            align-items    : center;

            .left {
                width : 20%;
                height: 100%;
                color : white;
            }

            .right {
                width : 80%;
                height: 100%;

                input {
                    width        : 100%;
                    height       : 100%;
                    outline      : none;
                    border       : none;
                    border-radius: 5px;
                    padding      : 0 10px;
                }
            }
        }
    }

    button {
        width        : 50%;
        height       : 30px;
        outline      : none;
        border       : none;
        border-radius: 5px;
        background   : rgb(91, 122, 223);
        color        : white;
        line-height  : 30px;
        cursor       : pointer;
    }
}

.drop-trans {
    transform: translate(-50%, 0);
}